<template>
  <section id="commentDetails">
    <div class="commentBox" v-for="(item,index) in commentData" :key="index">
      <!-- 一级评论 -->
      <div class="fathrer_comment">
        <div class="userinfo" v-if="item.userinfo">
          <img :src="item.userinfo.user_img" alt="头像" v-if="item.userinfo.user_img" />
          <img src="@/assets/initialHead.jpeg" alt="" v-else />
          <p>
            <span>{{item.userinfo.name}}</span>
            <span>{{item.comment_date}}</span>
          </p>
        </div>
        <div class="userinfo" v-else>
          <img src="@/assets/initialHead.jpeg" alt=""/>
          <p>
            <span>无昵称</span>
            <span>04-22</span>
          </p>
        </div>

        <div class="content" @click="replyComments(item.userinfo.name,item.comment_id)">{{item.comment_content}}</div>
      </div>

      <!-- 子集评论 -->
      <div class="child_comment" v-if="item.children[0]">
        <childComment :commentData="item.children" @reComments="replyComments"/>
      </div>
    </div>
  </section>

</template>

<script>
import childComment from "@/components/article/childComment.vue";
export default {
  props: ["userInfo","commentData"],
  components:{
    childComment,
  },
  data(){
    return{
      show:false,
    }
  },
  methods:{
    replyComments(username,comment_id){
      this.$emit("replyComments",username,comment_id)
    }
  }  
};
</script>

<style lang="less" scoped>
#commentDetails {
  padding-bottom: 2.778vw;
  .commentBox {
    border-bottom: 0.278vw solid #f4f4f4;
    padding-bottom: 4.167vw;
    .fathrer_comment {
      padding: 4.167vw 0 1.389vw;
      .userinfo {
        display: flex;
        img {
          width: 9.722vw;
          height: 9.722vw;
          border-radius: 50%;
          margin-top: 0.556vw;
        }
        p {
          display: flex;
          flex-direction: column;
          color: #757575;
          font-size: 3.611vw;
          padding-left: 2.778vw;
          span:last-child {
            font-size: 3.333vw;
            padding-top: 0.833vw;
          }
        }
      }
      .content {
      padding-top: 1.389vw;
      padding-left: 12.5vw;
      word-wrap: break-word;
      word-break: normal;
      font-size: 3.611vw;
      line-height: 6.944vw;
      }
    }
    input{
      background-color: #f4f4f4;
      border-radius: 4.167vw;
      padding: 0.556vw 2.778vw 0.556vw 2.778vw;
      max-height: 21.111vw;
      overflow: scroll;
      font-size: 3.611vw;
    }
    .child_comment {
      margin-left: 12.5vw;
      padding: 1.389vw 2.222vw;
      background-color: #f4f4f4;
    }
  }
}
</style>
